import React, { Component } from 'react'
import { List } from 'react-virtualized'

import axios from '../../../../utils/request'
import { getCurrentCity } from '../../../../utils/getCurrentCity'

import FilterTitle from '../FilterTitle'
import FilterPicker from '../FilterPicker'
import FilterMore from '../FilterMore'

import styles from './index.module.css'

export default class Filter extends Component {
  state = {
    selectedStatus: {
      area: false,
      mode: false,
      price: false,
      more: false
    },
    openType: '',
    sourceData: {},
    data: [],
    cols: '',
    slectedValue: {
      area: ['area', 'null'],
      mode: ['null'],
      price: ['null'],
      more: ['null']
    }
  }

  async componentDidMount() {
    const { value } = await getCurrentCity()
    // console.log(value)
    const { body } = await axios(`/houses/condition?id=${value}`)
    // console.log(body)
    this.setState({
      sourceData: body
    })
  }

  getHouseData(sourceData, openType) {
    const {
      area,
      subway,
      rentType,
      price,
      roomType,
      oriented,
      floor,
      characteristic
    } = sourceData
    switch (openType) {
      case 'area':
        this.setState({
          data: [area, subway],
          cols: 3
        })
        break
      case 'mode':
        this.setState({
          data: rentType,
          cols: 1
        })
        break
      case 'price':
        this.setState({
          data: price,
          cols: 1
        })
        break
      case 'more':
        this.setState({
          data: { roomType, oriented, floor, characteristic }
        })
        break
      default:
        break
    }
  }

  handleHighLight(type) {
    const { slectedValue, selectedStatus } = this.state

    const newSelectedStatus = selectedStatus
    // console.log(newSelectedStatus)
    Object.keys(newSelectedStatus).forEach(e => {
      // console.log(slectedValue[e])
      const selectVal = slectedValue[e]
      // console.log(selectVal)
      if (e === type) {
        //当前标题
        // console.log(1)
        newSelectedStatus[e] = true
      } else if (
        e === 'area' &&
        (selectVal.length !== 2 || selectVal[0] !== 'area') //其他标题逻辑
      ) {
        newSelectedStatus[e] = true
      } else if (e === 'mode' && selectVal[0] !== 'null') {
        newSelectedStatus[e] = true
      } else if (e === 'price' && selectVal[0] !== 'null') {
        newSelectedStatus[e] = true
      } else if (e === 'more' && selectVal[0] !== 'null') {
        // console.log('more')
        newSelectedStatus[e] = true
      } else {
        // console.log('default')
        newSelectedStatus[e] = false
      }
    })
    this.setState({
      selectedStatus: newSelectedStatus,
      openType: type
    })
  }

  titleClick = type => {
    // console.log(type)
    this.getHouseData(this.state.sourceData, type)
    this.handleHighLight(type)
  }

  hidePicker = () => {
    this.handleHighLight()
  }

  onSave = value => {
    const { slectedValue, openType } = this.state
    // console.log(value)
    //组装数据
    const newSelectedValues = {
      ...slectedValue,
      [openType]: value
    }

    const filters = {}
    // 对于 区域 数据来说，需要分别获取 key 和 value
    const areaData = newSelectedValues.area
    const key = newSelectedValues.area[0]
    let areaValue
    if (areaData.length === 3) {
      areaValue = areaData[2] === 'null' ? areaData[1] : areaData[2]
    } else if (areaData.length === 2) {
      // areaValue = area[1]
      areaValue = 'null'
    }
    filters[key] = areaValue

    filters.rentType = newSelectedValues.mode[0]
    filters.price = newSelectedValues.price[0]
    filters.more = newSelectedValues.more.join(',')

    this.props.onFilter(filters)

    this.setState(
      {
        slectedValue: {
          ...slectedValue,
          [openType]: value
        },
        openType: ''
      },
      () => {
        // console.log(this.state.openType)
        this.handleHighLight()
        // console.log(openType)
      }
    )
  }

  renderPicker() {
    const { openType, data, cols, slectedValue } = this.state
    // console.log(slectedValue[openType])
    return openType === 'area' ||
      openType === 'mode' ||
      openType === 'price' ? (
      <FilterPicker
        data={data}
        cols={cols}
        hidePicker={this.hidePicker}
        onSave={this.onSave}
        defaultVal={slectedValue[openType]}
        openType={openType}
        key={openType}
      />
    ) : null
  }

  clearSelectMore = () => {
    this.setState(
      {
        slectedValue: {
          ...this.state.slectedValue,
          more: ['null']
        }
      },
      () => {
        this.handleHighLight()
      }
    )
  }

  render() {
    const { openType, selectedStatus, data, slectedValue } = this.state
    // console.log(data)
    return (
      <div className={styles.root}>
        {/* 前三个菜单的遮罩层 */}
        {openType ? (
          <div className={styles.mask} onClick={this.hidePicker} />
        ) : (
          ''
        )}

        <div className={styles.content}>
          {/* 标题栏 */}
          <FilterTitle
            selectedStatus={selectedStatus}
            titleClick={this.titleClick}
          />

          {/* 前三个菜单对应的内容： */}
          {this.renderPicker()}

          {/* 最后一个菜单对应的内容： */}
          {openType === 'more' ? (
            <FilterMore
              onCancel={this.clearSelectMore}
              onOk={this.onSave}
              hidePicker={this.hidePicker}
              data={data}
              slectedValue={slectedValue}
            />
          ) : null}
        </div>
      </div>
    )
  }
}
